<template>
	<view class="fui-wrap">
		<view class="fui-content__box">
			<view class="fui-title" @click="startSlotMachine">{{list[currentIndex].foodName}}</view>
			<view class="fui-sub__title">
				<fui-button 
				background="#fff" 
				color="#465CFF" 
				borderColor="#465CFF" 
				width="200rpx" 
				height="72rpx" 
				:size="28"
				class="btn"
				@click="clickButton">{{buttonText}}</fui-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {listWhatToEatAll} from '../../../api/food.js'
	export default {
		data() {
			return {
				      list: [
						  {
							  id: '',
							  foodName: ''
						  }
					  ],
				      interval: null,
				      speed: 100, // 切换速度，单位毫秒
				      currentIndex: 0,
					  start: false,
					  buttonText: '开始滚动'
			}
		},
		created() {
			this.loadList()
		},
		methods: {
			loadList() {
				listWhatToEatAll(null).then(res => {
					console.log(res)
					if(res.code === 200 && res.data) {
						this.list = res.data
					}
				})
			},
		    startSlotMachine() {
				if(this.list.length <= 1) {
					this.loadList()
				}
		      if (this.interval) {
		        clearInterval(this.interval);
		        this.interval = null;
		      }
		      this.interval = setInterval(() => {
		        this.currentIndex = (this.currentIndex + 1) % this.list.length;
		      }, this.speed);
		    },
			stopInterval() {
				if (this.interval) {
				  clearInterval(this.interval);
				  this.interval = null;
				}
			},
			clickButton() {
				this.start = !this.start
				if(this.start) {
					this.startSlotMachine()
					this.buttonText = '就决定是你了'
				} else {
					this.stopInterval()
					this.buttonText = '开始滚动'
				}
			}
 		  },
		  beforeDestroy() {
				this.stopInterval()
		  }
	}
</script>

<style>
page{
	background-color: #fff;
	font-weight: normal;
}
.btn {
    display: inline-block;
    text-align: center;
    line-height: 40px; /* 根据按钮高度调整 */
    padding: 0 20px; /* 根据按钮宽度调整 */
    background-color: #f00; /* 按钮背景颜色 */
    color: #fff; /* 按钮文本颜色 */
  }
.fui-content__box{
	width: 100%;
	position: fixed;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.fui-img__box{
	width: 100%;
	padding: 0 87rpx;
	box-sizing: border-box;
}
.fui-img{
	width: 100%;
	height: 318rpx;
}
.fui-title{
	text-align: center;
	font-weight: 950;
	color: #333333;
	padding-top: 48rpx;
}
.fui-sub__title{
	text-align: center;
	font-size: 24rpx;
	font-weight: 400;
	color: #B2B2B2;
	padding-top: 8rpx;
}

</style>
